<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加纪念日</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航 -->
        <div class="flex items-center justify-between mb-6">
            <button class="icon-btn">
                <i class="fas fa-chevron-left"></i>
            </button>
            <h1 class="text-xl font-bold text-gray-900">添加纪念日</h1>
            <button class="text-blue-600 font-medium text-base">保存</button>
        </div>
        
        <!-- 表单 -->
        <div class="card bg-white fade-in">
            <div class="input-group">
                <div class="input-label flex items-center">
                    <i class="fas fa-tag text-blue-500 mr-2"></i>
                    名称
                </div>
                <input type="text" class="input-field" placeholder="例如：宝宝第一次微笑">
            </div>
            
            <div class="input-group">
                <div class="input-label flex items-center">
                    <i class="fas fa-calendar-alt text-blue-500 mr-2"></i>
                    日期
                </div>
                <div class="relative">
                    <input type="date" class="input-field" value="2024-06-05">
                    <div class="absolute right-4 top-0 bottom-0 flex items-center text-gray-400 pointer-events-none">
                        <i class="fas fa-calendar"></i>
                    </div>
                </div>
            </div>
            
            <div class="input-group">
                <div class="input-label flex items-center">
                    <i class="fas fa-icons text-blue-500 mr-2"></i>
                    图标
                </div>
                <div class="grid grid-cols-5 gap-3 mt-2">
                    <div class="icon-selector active">
                        <i class="fas fa-baby"></i>
                    </div>
                    <div class="icon-selector">
                        <i class="fas fa-birthday-cake"></i>
                    </div>
                    <div class="icon-selector">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="icon-selector">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="icon-selector">
                        <i class="fas fa-award"></i>
                    </div>
                    <div class="icon-selector">
                        <i class="fas fa-gift"></i>
                    </div>
                    <div class="icon-selector">
                        <i class="fas fa-shoe-prints"></i>
                    </div>
                    <div class="icon-selector">
                        <i class="fas fa-comment"></i>
                    </div>
                    <div class="icon-selector">
                        <i class="fas fa-tooth"></i>
                    </div>
                    <div class="icon-selector">
                        <i class="fas fa-plus"></i>
                    </div>
                </div>
            </div>
            
            <div class="input-group">
                <div class="input-label flex items-center">
                    <i class="fas fa-palette text-blue-500 mr-2"></i>
                    颜色
                </div>
                <div class="flex space-x-4 mt-2 flex-wrap">
                    <div class="color-selector active" style="background-color: #3b82f6;"></div>
                    <div class="color-selector" style="background-color: #ec4899;"></div>
                    <div class="color-selector" style="background-color: #10b981;"></div>
                    <div class="color-selector" style="background-color: #8b5cf6;"></div>
                    <div class="color-selector" style="background-color: #f59e0b;"></div>
                    <div class="color-selector" style="background-color: #ef4444;"></div>
                    <div class="color-selector" style="background-color: #6366f1;"></div>
                    <div class="color-selector" style="background-color: #14b8a6;"></div>
                </div>
            </div>
            
            <div class="input-group">
                <div class="input-label flex items-center">
                    <i class="fas fa-sticky-note text-blue-500 mr-2"></i>
                    备注 <span class="text-gray-400 text-xs ml-1">(可选)</span>
                </div>
                <textarea class="input-field h-20 py-2" placeholder="添加一些备注..."></textarea>
            </div>
        </div>
        
        <!-- 预览卡片 -->
        <div class="mt-6 fade-in" style="animation-delay: 0.1s">
            <h3 class="text-base font-medium text-gray-700 mb-3">预览效果</h3>
            <div class="card bg-gradient-to-r from-blue-50 to-indigo-50 border-none">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-700 mr-4">
                        <i class="fas fa-baby text-xl"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-blue-900">宝宝第一次微笑</h2>
                        <p class="text-blue-800 text-sm mt-1">2024年6月5日</p>
                        
                        <div class="flex items-center mt-3">
                            <i class="fas fa-clock text-blue-700 mr-2 text-sm"></i>
                            <span class="text-sm text-blue-800">您刚刚记录</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-6 fade-in" style="animation-delay: 0.2s">
            <button class="btn-primary flex items-center justify-center">
                <i class="fas fa-save mr-2"></i> 保存纪念日
            </button>
        </div>
        
        <div class="mt-4 fade-in" style="animation-delay: 0.25s">
            <button class="btn-secondary flex items-center justify-center">
                <i class="fas fa-times mr-2"></i> 取消
            </button>
        </div>
    </div>

    <style>
        .icon-selector {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f3f4f6;
            color: #4b5563;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .icon-selector:hover {
            background-color: #e5e7eb;
            transform: translateY(-2px);
        }
        
        .icon-selector.active {
            background-color: #dbeafe;
            color: #3b82f6;
            border: 2px solid #93c5fd;
        }
        
        .color-selector {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 8px;
        }
        
        .color-selector:hover {
            transform: scale(1.1);
        }
        
        .color-selector.active {
            border: 3px solid white;
            box-shadow: 0 0 0 2px currentColor;
        }
    </style>
</body>
</html> 